<template>
  <div class="thumbnails" @mousedown="() => setThumbnailsFocus(true)" v-click-outside="() => setThumbnailsFocus(false)"
    v-contextmenu="contextmenusThumbnails">
    <!-- <div class='tab'>
      全部页面
    </div> -->
    <div class="add-slide">
      <!-- <div class="btn" @click="addNewPage()">
        <IconPlus class="icon" />添加页面
      </div> -->
      <Button style="width: 100%;" @click="addNewPage()">+ 添加页面</Button>
      <!-- <Popover trigger="click" placement="bottomLeft" v-model:visible="presetLayoutPopoverVisible">
        <template #content>
          <LayoutPool @select="slide => { createSlideByTemplate(slide); presetLayoutPopoverVisible = false }" />
        </template>
        <div class="select-btn"><IconDown />选择模板</div>
      </Popover> -->
    </div>

    <Draggable class="thumbnail-list" :modelValue="slides" :animation="300" :scroll="true" :scrollSensitivity="50"
      :setData="null" @end="handleDragEnd" itemKey="id">
      <template #item="{ element, index }">
        <div class="thumbnail-item" :class="{
          'active': slideIndex === index,
          'selected': selectedSlidesIndex.includes(index),
        }" @mousedown="$event => handleClickSlideThumbnail($event, index)" v-contextmenu="contextmenusThumbnailItem">
          <div class="label" :class="{ 'offset-left': index >= 99 }">{{ fillDigit(index + 1, 2) }}</div>
          <ThumbnailSlide class="thumbnail" :slide="element" :size="120" :visible="index < slidesLoadLimit" />
        </div>
      </template>
    </Draggable>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, ref, nextTick } from 'vue'
import { storeToRefs } from 'pinia'
import { useMainStore, useSlidesStore, useKeyboardStore } from '@/store'
import { fillDigit } from '@/utils/common'
import { ContextmenuItem } from '@/components/Contextmenu/types'
import useSlideHandler from '@/hooks/useSlideHandler'
import useScreening from '@/hooks/useScreening'
import useLoadSlides from '@/hooks/useLoadSlides'

import Draggable from 'vuedraggable'
import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue'
// import LayoutPool from './LayoutPool.vue'

export default defineComponent({
  name: 'thumbnails',
  components: {
    Draggable,
    ThumbnailSlide,
    // LayoutPool,
  },
  setup() {
    const mainStore = useMainStore()
    const slidesStore = useSlidesStore()
    const keyboardStore = useKeyboardStore()
    const { selectedSlidesIndex: _selectedSlidesIndex, thumbnailsFocus } = storeToRefs(mainStore)
    const { slides, slideIndex } = storeToRefs(slidesStore)
    const { ctrlKeyState, shiftKeyState } = storeToRefs(keyboardStore)

    const { slidesLoadLimit } = useLoadSlides()

    const selectedSlidesIndex = computed(() => [..._selectedSlidesIndex.value, slideIndex.value])

    const presetLayoutPopoverVisible = ref(false)

    const {
      copySlide,
      pasteSlide,
      createSlide,
      createSlideByTemplate,
      copyAndPasteSlide,
      deleteSlide,
      cutSlide,
      selectAllSlide,
      scrollToCurrent,
    } = useSlideHandler()

    //新增页面
    const addNewPage = () => {
      createSlide()
      // console.log(1111, slides.value.length)
      nextTick(() => {
        scrollToCurrent()
      })
      // changSlideIndex(slides.value.length - 1)
      // changSlideIndex(slides.value.length)


    }

    // 切换页面
    const changSlideIndex = (index: number) => {
      mainStore.setActiveElementIdList([])

      if (slideIndex.value === index) return
      slidesStore.updateSlideIndex(index)
    }

    // 点击缩略图
    const handleClickSlideThumbnail = (e: MouseEvent, index: number) => {
      const isMultiSelected = selectedSlidesIndex.value.length > 1

      if (isMultiSelected && selectedSlidesIndex.value.includes(index) && e.button !== 0) return

      // 按住Ctrl键，点选幻灯片，再次点击已选中的页面则取消选中
      if (ctrlKeyState.value) {
        if (slideIndex.value === index) {
          if (!isMultiSelected) return

          const newSelectedSlidesIndex = selectedSlidesIndex.value.filter(item => item !== index)
          mainStore.updateSelectedSlidesIndex(newSelectedSlidesIndex)
          changSlideIndex(selectedSlidesIndex.value[0])
        }
        else {
          if (selectedSlidesIndex.value.includes(index)) {
            const newSelectedSlidesIndex = selectedSlidesIndex.value.filter(item => item !== index)
            mainStore.updateSelectedSlidesIndex(newSelectedSlidesIndex)
          }
          else {
            const newSelectedSlidesIndex = [...selectedSlidesIndex.value, index]
            mainStore.updateSelectedSlidesIndex(newSelectedSlidesIndex)
            changSlideIndex(index)
          }
        }
      }
      // 按住Shift键，选择范围内的全部幻灯片
      else if (shiftKeyState.value) {
        if (slideIndex.value === index && !isMultiSelected) return

        let minIndex = Math.min(...selectedSlidesIndex.value)
        let maxIndex = index

        if (index < minIndex) {
          maxIndex = Math.max(...selectedSlidesIndex.value)
          minIndex = index
        }

        const newSelectedSlidesIndex = []
        for (let i = minIndex; i <= maxIndex; i++) newSelectedSlidesIndex.push(i)
        mainStore.updateSelectedSlidesIndex(newSelectedSlidesIndex)
        changSlideIndex(index)
      }
      // 正常切换页面
      else {
        mainStore.updateSelectedSlidesIndex([])
        changSlideIndex(index)
        scrollToCurrent()
      }
    }

    // 设置缩略图工具栏聚焦状态（只有聚焦状态下，该部分的快捷键才能生效）
    const setThumbnailsFocus = (focus: boolean) => {
      if (thumbnailsFocus.value === focus) return
      mainStore.setThumbnailsFocus(focus)

      if (!focus) mainStore.updateSelectedSlidesIndex([])
    }

    // 拖拽调整顺序后进行数据的同步
    const handleDragEnd = (eventData: { newIndex: number; oldIndex: number }) => {
      const { newIndex, oldIndex } = eventData
      if (oldIndex === newIndex) return

      const _slides = JSON.parse(JSON.stringify(slides.value))
      const _slide = _slides[oldIndex]
      _slides.splice(oldIndex, 1)
      _slides.splice(newIndex, 0, _slide)
      slidesStore.setSlides(_slides)
      slidesStore.updateSlideIndex(newIndex)
    }

    const { enterScreening } = useScreening()

    const contextmenusThumbnails = (): ContextmenuItem[] => {
      return [
        {
          text: '粘贴',
          subText: 'Ctrl + V',
          handler: pasteSlide,
        },
        {
          text: '全选',
          subText: 'Ctrl + A',
          handler: selectAllSlide,
        },
        {
          text: '新建页面',
          subText: 'Enter',
          handler: createSlide,
        },
        {
          text: '开始演示',
          subText: 'Ctrl + F',
          handler: enterScreening,
        },
      ]
    }

    const contextmenusThumbnailItem = (): ContextmenuItem[] => {
      return [
        {
          text: '剪切',
          subText: 'Ctrl + X',
          handler: cutSlide,
        },
        {
          text: '复制',
          subText: 'Ctrl + C',
          handler: copySlide,
        },
        {
          text: '粘贴',
          subText: 'Ctrl + V',
          handler: pasteSlide,
        },
        {
          text: '全选',
          subText: 'Ctrl + A',
          handler: selectAllSlide,
        },
        { divider: true },
        {
          text: '新建页面',
          subText: 'Enter',
          handler: createSlide,
        },
        {
          text: '复制页面',
          subText: 'Ctrl + D',
          handler: copyAndPasteSlide,
        },
        {
          text: '删除页面',
          subText: 'Delete',
          handler: () => deleteSlide(),
        },
        { divider: true },
        {
          text: '从当前页演示',
          subText: 'Ctrl + F',
          handler: enterScreening,
        },
      ]
    }

    return {
      slides,
      slideIndex,
      selectedSlidesIndex,
      presetLayoutPopoverVisible,
      slidesLoadLimit,
      createSlide,
      createSlideByTemplate,
      setThumbnailsFocus,
      handleClickSlideThumbnail,
      contextmenusThumbnails,
      contextmenusThumbnailItem,
      fillDigit,
      handleDragEnd,
      addNewPage
    }
  },
})
</script>

<style lang="scss" scoped>
.thumbnails {
  border-right: solid 1px $borderColor;
  background-color: $rightbg;
  display: flex;
  flex-direction: column;
  user-select: none;
  height: calc(100% - 80px);
}

.add-slide {
  padding: 0 20px;
  font-size: 16px;
  border-bottom: 1px solid $borderColor;
  background-color: $darkGray;
  cursor: pointer;

  .btn,
  .select-btn {
    justify-content: center;
    align-items: center;
    height: 46px;
    line-height: 46px;
    background: $buttonbg;
    border-radius: 10px;
    text-align: center;
    margin: 0 20px;

    &:hover {
      background-color: $centerbg;
    }
  }

  .select-btn {
    &:hover {
      background-color: $centerbg;
    }
  }

  .icon {
    margin-right: 3px;
    font-size: 14px;
  }
}

.thumbnail-list {
  padding: 5px 0;
  flex: 1;
  overflow: auto;
  background-color: $darkGray;
}

.thumbnail-item {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  margin: 20px;
  border-radius: 10px;

  .thumbnail {
    outline: 1px solid rgba($color: $themeColor, $alpha: .15);
    border-radius: 3px;
  }

  &.active {
    // background: $leftbg;
    background: #232630;

    .label {
      position: absolute;
      top: 18px;
      left: 18px;
      color: white;
      // color: $themeColor;
    }

    .thumbnail {
      outline-color: $themeColor;
      border-radius: 3px;
    }
  }

  &.selected {
    .thumbnail {
      // outline-color: $themeColor;
      outline: 2px solid rgba($color: $themeColor, $alpha: 1);
      border-radius: 3px;
    }
  }
}

.label {
  position: absolute;
  top: 18px;
  left: 18px;
  font-size: 18px;
  color: #FFFFFF;
  letter-spacing: 0;
  line-height: 18px;
  font-weight: 400;
  width: 20px;
  cursor: grab;

  &.offset-left {
    position: relative;
    left: -4px;
  }

  &:active {
    cursor: grabbing;
  }
}

.tab {
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 12px;
  color: #fff;
  border-bottom: 1px solid $contentBorderColor;
}
</style>